<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- debugging.qdoc -->
  <title>Debugging QML Applications | Qt 5.12 5.12.3</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt 5.12</a></td><td ><span lang="zh-cn">调试QML应用程序</span></td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.12.3 <span lang="zh-cn">
参考指南</span></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><span lang="zh-cn">目录</span></h3>
<ul>
<li class="level1"><a href="#console-api">控制台API</a></li>
<li class="level2"><a href="#log">日志</a></li>
<li class="level2"><a href="#assert">断言</a></li>
<li class="level2"><a href="#timer">计时器</a></li>
<li class="level2"><a href="#trace">跟踪</a></li>
<li class="level2"><a href="#count">计数</a></li>
<li class="level2"><a href="#profile">分析</a></li>
<li class="level2"><a href="#exception">异常</a></li>
<li class="level1"><a href="#debugging-module-imports">调试模块导入</a></li>
<li class="level1"><a href="#qml-debugging-infrastructure">QML调试基础设施</a></li>
<li class="level2"><a href="#enabling-the-infrastructure">支持基础设施</a></li>
<li class="level2"><a href="#starting-applications">启动应用程序</a></li>
<li class="level2"><a href="#connecting-to-applications">连接到应用程序</a></li>
<li class="level1"><a href="#debugging-with-qt-creator">使用Qt Creator进行调试</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">调试QML应用程序</h1>
<span class="subtitle"></span>
<!-- $$$qtquick-debugging.html-description -->
<div class="descr"> <a name="details"></a>
<a name="console-api"></a>
<h2 id="console-api">控制台API</h2>
<a name="log"></a>
<h3 >日志</h3>
<p><code>console.log</code>, console.debug, console.info, console.warn 以及 console.error 可用于将调试信息打印到控制台。例如:</p>
<pre class="cpp">

  function f(a<span class="operator">,</span> b) {
    console<span class="operator">.</span>log(<span class="string">&quot;a is &quot;</span><span class="operator">,</span> a<span class="operator">,</span> <span class="string">&quot;b is &quot;</span><span class="operator">,</span> b);
  }

</pre>
<p>输出是使用C++中的<a href="../qtcore/qloggingcategory.html#qCDebug">qCDebug</a>, <a href="../qtcore/qloggingcategory.html#qCWarning">qCWarning</a>, <a href="../qtcore/qloggingcategory.html#qCCritical">qCCritical</a> 方法生成的，其中包含&quot;qml&quot; or &quot;js&quot;, 类别，这取决于执行日志记录的文件类型。参见<a href="debug.html">调试技术</a>。</p>
<a name="assert"></a>
<h3 >断言</h3>
<p><code>console.assert</code> 测试表达式是否为真。如果不为真，它将向控制台写入一个可选消息并打印堆栈跟踪。</p>
<pre class="cpp">

  function f() {
    var x <span class="operator">=</span> <span class="number">12</span>
    console<span class="operator">.</span>assert(x <span class="operator">=</span><span class="operator">=</span> <span class="number">12</span><span class="operator">,</span> <span class="string">&quot;This will pass&quot;</span>);
    console<span class="operator">.</span>assert(x <span class="operator">&gt;</span> <span class="number">12</span><span class="operator">,</span> <span class="string">&quot;This will fail&quot;</span>);
  }

</pre>
<a name="timer"></a>
<h3 >计时器</h3>
<p><code>console.time</code> 和 记录两次调用之间花费的时间(以毫秒为单位)。两者都使用一个字符串参数来标识度量。例如:</p>
<pre class="cpp">

  function f() {
      console<span class="operator">.</span>time(<span class="string">&quot;wholeFunction&quot;</span>);
      console<span class="operator">.</span>time(<span class="string">&quot;firstPart&quot;</span>);
      <span class="comment">// first part</span>
      console<span class="operator">.</span>timeEnd(<span class="string">&quot;firstPart&quot;</span>);
      <span class="comment">// second part</span>
      console<span class="operator">.</span>timeEnd(<span class="string">&quot;wholeFunction&quot;</span>);
  }

</pre>
<a name="trace"></a>
<h3 >跟踪</h3>
<p><code>console.trace</code>打印调用JavaScript时执行的堆栈跟踪。堆栈跟踪信息包含函数名、文件名、行号和列号。堆栈跟踪仅限于最后10个堆栈帧。</p>
<a name="count"></a>
<h3 >计数</h3>
<p><code>console.count</code>打印当前执行特定代码的次数以及消息。也就是说，</p>
<pre class="cpp">

  function f() {
    console<span class="operator">.</span>count(<span class="string">&quot;f called&quot;</span>);
  }

</pre>
<p>每当执行<code>f()</code>时,将打印 <code>f called: 1</code>, <code>f called: 2</code> ..&#x2e; </p>
<a name="profile"></a>
<h3 >分析</h3>
<p><code>console.profile</code>用于打开QML和JavaScript分析器。不支持嵌套调用，并将警告打印到控制台。</p>
<p><code>console.profileEnd</code>用于关闭QML和JavaScript分析器。在不调用console.profile的情况下调用此函数将向控制台输出警告。在此调用之前，应该附加一个分析客户机来接收和存储分析数据。例如:</p>
<pre class="cpp">

  function f() {
      console<span class="operator">.</span>profile();
      <span class="comment">//Call some function that needs to be profiled.</span>
      <span class="comment">//Ensure that a client is attached before ending</span>
      <span class="comment">//the profiling session.</span>
      console<span class="operator">.</span>profileEnd();
  }

</pre>
<a name="exception"></a>
<h3 >异常</h3>
<p><code>console.exception</code> 打印一条错误消息，并在调用它的位置打印JavaScript执行的堆栈跟踪。</p>
<a name="debugging-module-imports"></a>
<h2 id="debugging-module-imports">调试模块导入</h2>
<p>可以设置<code>QML_IMPORT_TRACE</code>环境变量，以启用来自qml导入加载机制的调试输出。</p>
<p>例如，对于这样一个简单的QML文件:</p>
<pre class="qml">

  import QtQuick 2.3

  <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span> }

</pre>
<p>如果在运行<a href="qtquick-qmlscene.html">QML Scene</a> (或者你的C++ QML 应用程序)之前设置<code>QML_IMPORT_TRACE=1</code>您将看到类似如下的输出:</p>
<pre class="cpp">

  <span class="type"><a href="../qtqml/qqmlimportdatabase.html">QQmlImportDatabase</a></span><span class="operator">::</span>addImportPath <span class="string">&quot;/qt-sdk/imports&quot;</span>
  <span class="type"><a href="../qtqml/qqmlimportdatabase.html">QQmlImportDatabase</a></span><span class="operator">::</span>addImportPath <span class="string">&quot;/qt-sdk/bin/QMLViewer.app/Contents/MacOS&quot;</span>
  <span class="type"><a href="../qtqml/qqmlimportdatabase.html">QQmlImportDatabase</a></span><span class="operator">::</span>addToImport <span class="number">0x106237370</span> <span class="string">&quot;.&quot;</span> <span class="operator">-</span><span class="number">1.</span><span class="operator">-</span><span class="number">1</span> File as <span class="string">&quot;&quot;</span>
  <span class="type"><a href="../qtqml/qqmlimportdatabase.html">QQmlImportDatabase</a></span><span class="operator">::</span>addToImport <span class="number">0x106237370</span> <span class="string">&quot;Qt&quot;</span> <span class="number">4.7</span> Library as <span class="string">&quot;&quot;</span>
  <span class="type"><a href="../qtqml/qqmlimportdatabase.html">QQmlImportDatabase</a></span><span class="operator">::</span>resolveType <span class="string">&quot;Rectangle&quot;</span> <span class="operator">=</span> <span class="string">&quot;QDeclarativeRectangle&quot;</span>

</pre>
<a name="qml-debugging-infrastructure"></a>
<h2 id="qml-debugging-infrastructure">QML调试基础设施</h2>
<p><a href="../qtqml/qtqml-index.html">Qt QML</a>模块提供了通过TCP端口调试、检查和分析应用程序的服务。</p>
<a name="enabling-the-infrastructure"></a>
<h3 >支持基础设施</h3>
<p>在编译应用程序时，必须显式地启用调试基础设施。如果使用qmake，可以将配置参数添加到项目.pro文件中:</p>
<ul>
<li>Qt Quick 1: <code>CONFIG+=declarative_debug</code></li>
<li>Qt Quick 2: <code>CONFIG+=qml_debug</code></li>
</ul>
<p>如果你使用其他编译系统，你可以把以下定义传递给编译器:</p>
<ul>
<li>Qt Quick 1: <code>QT_DECLARATIVE_DEBUG</code></li>
<li>Qt Quick 2: <code>QT_QML_DEBUG</code></li>
</ul>
<p><b>注意:</b>启用调试基础设施可能会损害应用程序和系统的完整性，因此，您应该只在受控环境中启用调试基础设施。启用基础设施后，应用程序会显示以下警告:</p><p><code>QML debugging is enabled. Only use this in a safe environment.</code></p>
<a name="starting-applications"></a>
<h3 >启动应用程序</h3>
<p>用以下参数启动应用程序:</p>
<p><code>-qmljsdebugger=port:&lt;port_from&gt;[,port_to][,host:&lt;ip address&gt;][,block]</code></p>
<p>其中<code>port_from</code>强制）在指定<code>port_to</code> 时指定调试端口或一系列端口的起始端口， <code>ip address</code>（可选）指定运行应用程序的主机的IP地址，<code>block</code>（可选）在调试客户端连接到服务器之前阻止应用程序运行。这样可以从头开始调试。</p>
<p>应用程序成功启动后，将显示以下消息：</p>
<p><code>QML Debugger: Waiting for connection on port &lt;port_number&gt;</code></p>
<a name="connecting-to-applications"></a>
<h3 >连接到应用程序</h3>
<p>当应用程序运行时，实现二进制协议的IDE或工具可以连接到打开的端口。</p>
<p>Qt提供了一个<code>qmlprofiler</code>命令行工具来捕获文件中的分析数据。要运行此工具，请输入以下命令:</p>
<p><code>qmlprofiler -p &lt;port&gt; -attach &lt;ip address&gt;</code></p>
<a name="debugging-with-qt-creator"></a>
<h2 id="debugging-with-qt-creator">使用Qt Creator进行调试</h2>
<p> Qt Creator使用调试基础设施在桌面和远程设备上调试、检查和配置Qt Quick应用程序。Qt Creator提供了用于调试JS、检查对象树和分析QML引擎活动的集成客户机。有关更多信息，请参见<a href="http://doc.qt.io/qtcreator/creator-debugging-qml.html">Qt Creator:调试Qt Quick项目</a>。</p>
</div>
<!-- @@@qtquick-debugging.html -->
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
